<template>
	<view class="mine-page page">
		<CustomNav title="个人信息" :isBack="true"></CustomNav>
		<view style="padding: 30rpx;">
			<view class="form-block">
				<button hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseAvatar" class="avatar-block">
					<image :src="form.avatar||'../../static/image/photo.png'" class="avatar"></image>
					<view class="iconfont icon-xiangji"></view>
				</button>
				<view class="form-item">
					<view class="form-label">昵称</view>
					<input type="nickname" class="mine-name" :value="form.name" placeholder="请输入昵称" @blur="bindblur"
						@input="bindinput" />
				</view>
				<view class="form-item">
					<view class="form-label">手机号码</view>
					<!-- 	<button hover-class="none" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="getPhone">{{form.phone||'点击获取手机号码'}}</button> -->
					<input class="mine-name" v-model="form.phone" disabled="true" />
				</view>
				<view class="form-item">
					<view class="form-label">村组</view>
					<view class="form-content">
						<uni-data-picker :localdata="township" popup-title="请选择村组" @change="onchange"
							@nodeclick="onnodeclick" class="form-crl1" v-model="form.area"></uni-data-picker>
					</view>
				</view>
			</view>
			<view @click="submit" class="btn normal">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		savePhoneNumberByCode,
		saveUserInfo,
		getUserInfo
	} from '@/api/user.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		getWxLoginCode
	} from '@/util/user.js'
	import {
		getStorage,
		showToast
	} from '@/util/auth'
	import {
		getselectTreeApi
	} from '@/api/report.js';
	export default {
		data() {
			return {
				form: {
					avatar: '',
					name: '',
					phone: '',
					area:[]
				},
				user: {
					avatar: '',
					name: ''
				},
				rule: {
					// avatar: {
					// 	name: '头像',
					// 	required: true
					// },
					// name: {
					// 	name: '昵称',
					// 	required: true
					// },
					phone: {
						name: '手机号',
						required: true
					}
				},
				township: [],
			}
		},
		methods: {
			onchange(e) {
				const value = e.detail.value
				this.form.area = value
			},
			onnodeclick(node) {},
			getselectTree() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getselectTreeApi({}).then(res => {
					uni.hideLoading()
					const data = res
					data.forEach((item, index) => {
						item.value = item.id
						item.text = item.name
						delete(item.id)
						delete(item.name)
						item.children.forEach((item1, index1) => {
							item1.value = item1.id
							item1.text = item1.name
							delete(item1.id)
							delete(item1.name)
						})
					})
					this.township = data;
				}).catch(() => {
					uni.hideLoading()
				})
			},
			bindblur(e) {
				this.form.name = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.form.name = e.detail.value;
			},
			async submit() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '保存中',
						mask: true
					})
					saveUserInfo(this.form).then(() => {
						this.$store.dispatch('user/getUser')
						this.showToast('保存成功', () => {
							uni.navigateBack();
						})
					})
				}
			},
			chooseAvatar(e) {
				uploadFile(e.detail.avatarUrl).then(res => {
					this.form.avatar = res.url;
				})
			},
			// async getPhoneNumber(e) {
			// 	if (!e.detail.code) {
			// 		this.showToast('您取消了授权');
			// 		return;
			// 	}
			// 	if (!getStorage("token")) {
			// 		let code = await getWxLoginCode();
			// 		uni.showLoading({
			// 			title: '加载中',
			// 			mask: true,
			// 		})
			// 		let res = await this.$store.dispatch('user/getWxLoginCode', code).catch(() => {
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: '获取信息失败，请重试',
			// 			})
			// 		})
			// 	}
			// 	uni.showLoading({
			// 		title: '获取中',
			// 		mask: true
			// 	})
			// 	savePhoneNumberByCode({
			// 		code: e.detail.code
			// 	}).then((res) => {
			// 		this.form.phone = res;
			// 		this.getInfo()
			// 	})
			// },
			getInfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfo().then(res => {
					Object.keys(this.form).forEach(item => {
						this.form = res
					})
				})
			}
		},
		onLoad(e) {
			if (getStorage('token')) {
				this.getInfo();
			}
			let user = this.$store.getters.user.user;
			if (user) {
				Object.keys(this.form).forEach(item => {
					this.form[item] = user[item]
				})
			}
			if (getStorage('user')) {
				this.form = getStorage('user')
			}
		},
		onShow() {
			this.getselectTree()
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;

		.form-block {
			margin-top: 28%;
			background: #fff;
			border-radius: 12px;
			overflow: hidden;
			padding: 30rpx;

			.avatar-block {
				margin: 60rpx auto;
				width: 160rpx;
				height: 160rpx;
				position: relative;
				padding: 0;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #F7F6F9;
				}

				.iconfont {
					position: absolute;
					right: 0rpx;
					bottom: 0rpx;
					color: #333;
					font-size: 38rpx;
				}
			}

			.form-item {
				width: 100%;
				height: 100rpx;
				border-top: 1px solid #F8F8F8;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				position: relative;

				.form-label {
					width: 160rpx;
				}

				.form-ctrl {
					width: calc(100% - 160rpx);
				}

				.getPhone {
					width: calc(100% - 220rpx);
					height: 100%;
					position: absolute;
					left: 190rpx;
					z-index: 1;
					display: flex;
					align-items: center;
					font-size: 28rpx;
				}
			}

			// .form-item:last-child {
			// 	border: none;
			// }
		}

		.btn {
			margin: 60rpx auto;
			background: #157DFA;
			color: #fff;
		}
		.form-crl1 {
			width: calc(100% - 80rpx);
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>